<template>
  <div class="list-page">
    <div class="banner-img">
      <img v-if="actImg.activityBanner" :src="actImg.activityBanner" width="100%" height="450px">
    </div>
    <div class="banner-detail">
      <p>以下商品参与{{actImg.activityName}}的活动</p>
    </div>
    <!-- 工具栏 -->
    <div class="tool-wrapper clearfix">
      <div class="btn-group">
        <div class="btn" :class="{'active': queryway == 1}" @click="setQueryWay(1)">
          <span class="text">综合</span>
        </div>
        <div class="btn" :class="{'active': queryway == 2}" @click="setQueryWay(2)">
          <span class="text">折扣</span>
          <i class="icon el-icon-caret-top" v-if="sortway === 'asc'"></i>
          <i class="icon el-icon-caret-bottom" v-if="sortway === 'desc'"></i>
        </div>
      </div>
    </div>
    <!-- 商品列表 -->
    <div class="list-wrapper">
      <ul class="goods-list row" v-if="queryway != 3">
        <li class="goods-item col-3" v-for="(item, index) in goodsList" :key="index">
          <router-link class="product-box" target="_blank" :to="'/goods/goodsDetail?productId=' + item.productId">
            <img :src="item.productCover" class="product-img" width="100%">
            <div class="product-info">
              <div class="sell">
                <span class="discount">{{item.minDiscount ? item.minDiscount : '?'}}折</span>
                <span class="sell-price">
                  <em>¥</em>
                  <span v-if="item.minSellPrice">{{item.minSellPrice | priceFormat1}}</span>
                  <span v-else>?</span>
                  <i class="sell-type">/{{item.attributeName}}</i>
                </span>
                <span class="orignal-price">¥ {{item.orginalPrice | priceFormat1}}</span>
              </div>
              <div class="name">{{item.productName}}</div>
              <router-link :to="'/store/storeInfo?storeId=' + item.storeId" class="store clearfix">{{item.storeName}}</router-link>
              <div class="discounts clearfix" v-if="item.activityList">
                <div class="tag-group" v-if="item.activityList.isMore === '1'">
                  <span class="tag" v-for="(tag, index1) in item.activityList.type" :key="index1">{{FavourableActivityTypes.Types[tag]}}</span>
                </div>
                <div class="tag-group" v-else>
                  <span class="tag">{{item.activityList.activityName}}</span>
                </div>
              </div>
            </div>
          </router-link>
        </li>
      </ul>
      <v-pagination v-if="total" :pg="page" :size="pageSize" :total="total" @page-change="pageChange"></v-pagination>
    </div>
    <!-- 查看价格 -->
    <vTools/>
  </div>
</template>

<script>
import vPagination from '@/components/public/pagination'
import vSelecter from '@/components/public/selecter'
import vTools from '@/components/layout/tools'
import {FavourableActivityTypes} from '@/util/enums'

export default {
  data () {
    return {
      activeId: this.$route.query.activeId || '', // 活动id
      FavourableActivityTypes: FavourableActivityTypes,
      actImg: [], // 头部banner图
      queryway: 1, // 搜索方式 {1: 综合； 2: 折扣；3:店铺}
      sortway: '', // 是否按折扣升序排列
      goodsList: [],
      page: this.$route.query.pg || 1,
      pageSize: 20,
      total: 0,
      loading: false
    }
  },
  components: {
    vSelecter,
    vPagination,
    vTools
  },
  mounted () {
    this.getGoodsList()
    this.getImg()
  },
  methods: {
    getImg () {
      this.$http.post(this.$api + '/pc/activity/activityDetail', {
        activityId: this.activeId || ''
      }).then(res => {
        if (res.responseCode === '0000') {
          this.actImg = res.data
        }
      }).catch(() => {
        this.$message.error({
          message: '请求超时！'
        })
      })
    },
    // 切换商品排序方式
    setQueryWay (index) {
      if (index === 2) {
        switch (this.sortway) {
          case 'asc':
            this.sortway = 'desc'
            break
          case 'desc':
            this.sortway = ''
            break
          default:
            this.sortway = 'asc'
            break
        }
      }
      this.queryway = index
      this.getGoodsList()
    },
    // 搜索商品
    getGoodsList () {
      let param = {
        page: this.page,
        pageSize: this.pageSize,
        discountSort: this.sortway,
        activityId: this.activeId
      }
      this.$http.post(this.$api + '/pc/activity/activityProduct', param).then(res => {
        if (res.responseCode === '0000') {
          this.goodsList = res.data.list
          this.total = res.data.total
        }
      })
    },
    // 切换页面
    pageChange (pg) {
      this.page = pg
      this.getGoodsList()
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/basic.scss';
.banner-detail {
  height: 40px;
  line-height: 40px;
  padding-left: 13px;
  color: #ffffff;
  font-size: $fz_16;
  margin: 20px 0 5px;
  background: url(../../assets/images/activeibg.png) no-repeat;
  background-size: cover;
  p{
    padding-left: 37px;
    background: url(../../assets/images/icon-activity.png) no-repeat left center;
  }
}
.list-wrapper .goods-list .goods-item .product-box .product-info .name{
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: inherit;
}
.list-wrapper .goods-list {
  margin: 0;
  margin-left: -10px;
}
</style>
